<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>Mobile MVC on iPad</title>
		<link rel="stylesheet" type="text/css" href="demo.css"/>		
		<style>
		@import "../../../../mobile/themes/iphone/base.css";
		@import "../../../../mobile/themes/iphone/ipad.css";
		@import "../../../../mobile/themes/common/FixedSplitter.css";
		html, body{
			height: 100%;
			overflow: hidden;
			position: relative;
		}
		.mblEdgeToEdgeList {
			background-color: #DBDDE2;
		}
		</style>
	<!--<script type="text/javascript" src="../../../../../../dojo/dojo.js" djConfig="parseOnLoad: false"></script> -->
		<script type="text/javascript" djConfig="parseOnLoad:0,isDebug:1,async:1" src="../../../../../../dojo/dojo.js"></script>
		<script type="text/javascript" src="src-async-store.js" charset="utf-8"></script>

	</head>
	<body>
	<div id="wholepage" style="display:none">	
		<div dojoType="dojox.mobile.FixedSplitter" orientation="H">
			<div dojoType="dojox.mobile.FixedSplitterPane" style="width:300px;border-right:1px solid black;">
				<div id="foo" dojoType="dojox.mobile.ScrollableView" selected="true">
					<h1 dojoType="dojox.mobile.Heading">Mobile MVC Demo for iPad</h1>
					<ul dojoType="dojox.mobile.EdgeToEdgeList" transition="flip" stateful="true">
					<li id="sdb" dojoType="dojox.mobile.ListItem" icon="images/i-icon-1.png" transition="slide" moveTo="settings"  selected="true">
						Simple Data Binding
					</li>
					<li id="rdb" dojoType="dojox.mobile.ListItem" icon="images/i-icon-2.png" transition="slide" moveTo="repeat">
						Repeat Data Binding
					</li>
					<li id="sfg" dojoType="dojox.mobile.ListItem" icon="images/i-icon-3.png" transition="slide" moveTo="generate">
						Simple Form Generate
					</li>
				</ul>
			</div>
			</div>

			<div dojoType="dojox.mobile.FixedSplitterPane">


	<div id="settings" dojoType="dojox.mobile.ScrollableView"  selected="true">
		<h1 id="home" dojoType="dojox.mobile.Heading" fixed="top">Data Binding Example</h1>
		<form name="testForm" id="testForm">	
		<div class="field-title">Ship to - Bill to Address</div>
			<div class="fieldset" dojoType="dojox.mvc.Group" ref="model">
				<div class="field-row">
					<span>Order #</span>
					<input type=text id="lastnameInput" dojoType="dojox.mobile.TextBox"
						placeholder="Order #" ref="'rel:Serial'"/>
				</div>
				<div class="field-row">
					<span>Last</span>
					<input type=text id="serialInput" dojoType="dojox.mobile.TextBox"
						placeholder="Last" ref="'rel:Last'"/>
				</div>
				<div class="field-row">
					<span>Email</span>
					<input type=text id="emailInput1" dojoType="dojox.mobile.TextBox"
						placeholder="Last" ref="'rel:Email'"/>
				</div>
			</div>
			<div class="spacer"></div>
			<button id="shipto" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setRef('addrGroup', model.ShipTo)">Ship To</button>
			<button id="billto" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setRef('addrGroup', model.BillTo)">Bill To</button>		
			<br/>
			<div class="fieldset" id="addrGroup" dojoType="dojox.mvc.Group" ref="model.ShipTo">
				<div class="field-row">
					<span>Street</span>
					<input type=text id="streetInput" dojoType="dojox.mobile.TextBox"
						placeholder="Street" ref="'rel:Street'"/>
				</div>
				<div class="field-row">
					<span>City</span>
					<input type=text id="cityInput" dojoType="dojox.mobile.TextBox"
						placeholder="City" ref="'rel:City'"/>
				</div>
				<div class="field-row">
					<span>State</span>
					<input type=text id="stateInput" dojoType="dojox.mobile.TextBox"
						placeholder="State" ref="'rel:State'"/>
				</div>
				<div class="field-row">
					<span>ZIP Code</span>
					<input type=text id="zipInput" dojoType="dojox.mobile.TextBox"
						placeholder="ZIP Code" ref="'rel:Zip'"/>
				</div>
			</div>
			<div class="spacer"></div>
			<button id="reset1" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="model.reset()">Reset</button>
		</form>
	</div>


				<div id="repeat" dojoType="dojox.mobile.ScrollableView">
		<h1 dojoType="dojox.mobile.Heading" fixed="top">Repeat Data Binding Example</h1>
		<form name="repeatTestForm" id="repeatTestForm">	
		<div class="field-title">Search Results</div>
			<div class="fieldset" dojoType="dojox.mvc.Repeat" class="row" ref="repeatmodel">
				<div dojoType="dojox.mvc.Group" ref="'rel:${this.index}'">
					<div class="row">			 
						<input dojoType="dojox.mobile.TextBox"
							id="nameInput${this.index}" ref="'rel:First'" placeHolder="First Name"/>
						<button id="details${this.index}" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setDetailsContext('${this.index}')">Details</button>
					</div>
				</div>
			</div>
			<div class="spacer"></div>
			<div  dojoType="dojox.mvc.Group" ref="repeatmodel">
				<div id="detailsBanner">Details for selected index:</div>
					<div class="fieldset" id="detailsGroup" dojoType="dojox.mvc.Group" ref="'rel:0'">
						<div class="field-row">
							<span>First Name</span>
							<input type=text id="firstInput" dojoType="dojox.mobile.TextBox"
								placeholder="First Name" ref="'rel:First'"/>
						</div>
						<div class="field-row">
							<span>Last Name</span>
							<input type=text id="lastInput" dojoType="dojox.mobile.TextBox"
								placeholder="Last Name" ref="'rel:Last'"/>
						</div>
						<div class="field-row">
							<span>Email</span>
							<input type=text id="emailInput2" dojoType="dojox.mobile.TextBox"
								placeholder="Email" ref="'rel:Email'"/>
						</div>
						<div class="field-row">
							<span>Telephone</span>
							<input type=text id="telInput" dojoType="dojox.mobile.TextBox"
								placeholder="Telephone" ref="'rel:Tel'"/>
						</div>
					</div>
				</div>		   
			<div class="spacer"></div>
			<button id="add" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="insertResult(nextIndexToAdd)">Add</button>
			<button id="save" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="console.log(repeatmodel[selectedIndex].toPlainObject());repeatmodel[selectedIndex].commit()">Save</button>
			<button id="reset2" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="repeatmodel.reset()">Reset</button>
			
	</div>

	<div id="generate" data-dojo-type="dojox.mobile.ScrollableView"	 style="width: 100%;">
	<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">Simple Form Generate Example</h1>
	<div class="field-title"></div>
		<div id="main">
		  <div id="leftNav">
		  </div>
		  <div id="mainContent" class="generate-maincontent">
			<div id="outerModelArea">
				<h3 data-dojo-type="dojox.mobile.RoundRectCategory">Model</h3>
				<div class="generate-textarea-row">
					<textarea class="generate-textarea-cell" data-dojo-type="dojox.mobile.TextArea" id="modelArea">
{
	"Serial": "11111",
	"First": "John",
	"Last": "Doe",
	"Email": "jdoe@example.com",
	"Phones": [
		{
			"Office": "111-111-1111"
		},
		{
			"Mobile": "222-222-2222"
		}
	]
}
					</textarea>
				</div>
				<div class="fieldset">
					<div class="spacer"></div>
					<button id="generate1" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="updateView()">Generate Form</button>
				</div>
			</div>
			<div id="viewArea" style="display:none">
				<h3 data-dojo-type="dojox.mobile.RoundRectCategory">Generated View</h3>
				<div class="fieldset">
					<div id="view" data-dojo-type="dojox.mvc.Generate" data-dojo-props="widgetMapping:{'String' : 'dojox.mobile.TextBox'}, idNameMapping:{'String' : 'TB'}"></div>
				</div>
				<div class="fieldset">
					<div class="spacer"></div>
					<button id="updateModel" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="updateModel()">Update Model</button>
				</div>
			</div>
					<textarea style="display:none" data-dojo-type="dojox.mobile.TextArea" id="modelArea2">
{
	"Serial": "11111",
	"First": "John",
	"Middle": "J",
	"Last": "Doe",
	"Email": "jdoe@example.com",
	"Phones": [
		{
			"Office": "111-111-1111"
		},
		{
			"Mobile": "222-222-2222"
		}
	]
}
					</textarea>
			
		  			</div>
				</div>
			</div>
		</div></div></div>
	</body>
</html>
